import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import store from './redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 开启 React 中严格模式 并让整个系统都开启路由模式
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// 检测 store 里面 state 值得变化, 不检测则数据不会变化， react-redux 完美解决此问题
// 这样写 当每个 state 中数据变化时 整个文档都会重新渲染一次， 好在有个 diff 算法可以完成解决这个问题
store.subscribe(() => {
  root.render(
    // 开启 React 中严格模式 并让整个系统都开启路由模式
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  );
})
